<template>
  <a-modal
    :title="`${model ? '编辑' : '新增'}活动`"
    :width="800"
    :visible="visible"
    :confirmLoading="loading"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <a-spin :spinning="loadingSpin" :style="{ padding: '0 50px' }">
      <a-form :form="form" v-bind="formLayout">
        <a-row>
          <a-col>
            <a-form-item v-show="false" label="主键ID">
              <a-input v-decorator="['id']" disabled />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="活动名称" :labelCol="{ span: 8 }" :wrapperCol="{ span: 16 }">
              <a-input v-decorator="['name']" placeholder="活动名称" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="活动类型" :labelCol="{ span: 8 }" :wrapperCol="{ span: 16 }">
              <a-radio-group v-decorator="['type', { initialValue: 'clothes' }]">
                <a-radio-button value="clothes">洗衣</a-radio-button>
                <a-radio-button value="goods">商城</a-radio-button>
              </a-radio-group>
            </a-form-item>
          </a-col>
          <template v-if="form.getFieldValue('type')=== 'goods'">
            <a-col :span="12">
              <a-form-item label="商品库存" :labelCol="{ span: 8 }" :wrapperCol="{ span: 16 }">
                <a-input v-decorator="['stock']" placeholder="请输入商品库存"/>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="商品限购" :labelCol="{ span: 8 }" :wrapperCol="{ span: 16 }">
                <a-input v-decorator="['astrict_num']" placeholder="请输入商品限购数量"/>
              </a-form-item>
            </a-col>
          </template>
          <a-col :span="12">
            <a-form-item label="活动价格" :labelCol="{ span: 8 }" :wrapperCol="{ span: 16 }">
              <a-input v-decorator="['price']" placeholder="活动价格" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="参与类型" :labelCol="{ span: 8 }" :wrapperCol="{ span: 16 }">
              <a-radio-group v-decorator="['is_vip', { initialValue: 0}]">
                <a-radio-button :value="1">vip活动</a-radio-button>
                <a-radio-button :value="0">普通活动</a-radio-button>
              </a-radio-group>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="活动数量" :labelCol="{ span: 8 }" :wrapperCol="{ span: 16 }">
              <a-input v-decorator="['number']" placeholder="活动数量" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="开始时间" :labelCol="{ span: 8 }" :wrapperCol="{ span: 16 }">
              <a-date-picker v-decorator="['atime']" :show-time="true" placeholder="请选择活动开始时间" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="结束时间" :labelCol="{ span: 8 }" :wrapperCol="{ span: 16 }">
              <a-date-picker v-decorator="['etime']" :show-time="true" placeholder="请选择活动结束时间" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="权重" :labelCol="{ span: 8 }" :wrapperCol="{ span: 16 }">
              <a-input v-decorator="['weight']" placeholder="请填写权重"/>
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item label="活动内容" :labelCol="{ span: 4 }" :wrapperCol="{ span: 20 }">
              <a-input v-decorator="['content']" placeholder="活动内容" type="textarea" />
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item label="头图" style="margin-bottom: 0" :labelCol="{ span: 4 }" :wrapperCol="{ span: 20 }">
              <d-upload v-decorator="['img_url', { initialValue: '' }]"> </d-upload>
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item label="轮播图" style="margin-bottom: 0" :labelCol="{ span: 4 }" :wrapperCol="{ span: 20 }">
              <d-upload v-decorator="['carousel_img', { initialValue: '' }]" multiple> </d-upload>
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item label="内容图" style="margin-bottom: 0" :labelCol="{ span: 4 }" :wrapperCol="{ span: 20 }">
              <d-upload v-decorator="['content_img', { initialValue: '' }]" multiple> </d-upload>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="是否上架" :labelCol="{ span: 8 }" :wrapperCol="{ span: 16 }">
              <a-select v-decorator="['status', { initialValue: 0 }]" placeholder="是否上架">
                <a-select-option :value="1">是</a-select-option>
                <a-select-option :value="0">否</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="是否线下活动" :labelCol="{ span: 8 }" :wrapperCol="{ span: 16 }">
              <a-select v-decorator="['is_offline', { initialValue: 0 }]" placeholder="是否线下活动">
                <a-select-option :value="1">是</a-select-option>
                <a-select-option :value="0">否</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
		  <a-col :span="12">
		    <a-form-item label="是否同步抖音" :labelCol="{ span: 8 }" :wrapperCol="{ span: 16 }">
		      <a-select v-decorator="['is_dy', { initialValue: 0 }]" placeholder="是否同步抖音">
		        <a-select-option :value="1">是</a-select-option>
		        <a-select-option :value="0">否</a-select-option>
		      </a-select>
		    </a-form-item>
		  </a-col>
        </a-row>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
import { clothesStoreActivityDetail, clothesStoreActivityAdd, clothesStoreActivityEdit } from '@/api/activity'
import formModalMixin from '@/mixins/formModalMixin'

const fields = [
  'id',
  'name',
  'content',
  'price',
  'number',
  'atime',
  'etime',
  'weight',
  'status',
  'img_url',
  'carousel_img',
  'content_img',
  'type',
  'is_vip',
  'stock',
  'astrict_num',
  'is_offline',
]

export default {
  mixins: [formModalMixin],
  data () {
    this.fields = fields
    this.addAction = clothesStoreActivityAdd
    this.editAction = clothesStoreActivityEdit
    this.detailAction = clothesStoreActivityDetail
    return {
      clothesList: [],
      loadingSpin: false,
      formLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 6 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 18 }
        }
      }
    }
  },
  methods: {
  }
}
</script>
